<template>
	<view class="store">
		<view class="card">
			<view class="item flex_r_between">
				<text class="tit">店铺名称</text>
				<view class="detail flex_box">
					<input type="text" v-model="info.store_name" placeholder="请输入姓名" :disabled="flag" />
					<uni-icons type="forward" :size="20" color="#B3B3B3" v-show="!flag"></uni-icons>
				</view>
			</view>
			<view class="item flex_r_between">
				<text class="tit">邮箱</text>
				<view class="detail flex_box">
					<input type="text" v-model="info.email" placeholder="请输入邮箱" :disabled="flag" />
					<uni-icons type="forward" :size="20" color="#B3B3B3" v-show="!flag"></uni-icons>
				</view>
			</view>
			
			<view class="item flex_r_between">
				<text class="tit">店铺头像</text>
				<view class="detail flex_box" @click="onAvatar">
					<image :src="info.logo.image" mode="aspectFill" class="avatar"></image>
					<uni-icons type="forward" :size="20" color="#B3B3B3" v-show="!flag"></uni-icons>
				</view>
			</view>
			
			<view class="item flex_r_between">
				<text class="tit">营业执照</text>
				<view class="detail flex_box">
					<image :src="info.yyzz.image" mode="aspectFill" class="yyzz"></image>
					
				</view>
			</view>
			
			<view class="item flex_r_between">
				<text class="tit">店铺评分</text>
				<view class="detail flex_box">
					<uni-rate :disabled="true" disabledColor="#EF5233" :value="info.high_opinion/info.opinion*5 || 5" :size="18" />
				</view>
			</view>
			
			<view class="item flex_r_between">
				<text class="tit">服务次数</text>
				<view class="detail flex_box">
					<text>{{info.order_num > 10000 ? info.order_num/10000 + '万+' : info.order_num}}</text>
				</view>
			</view>
			
			<view class="item flex_r_between">
				<text class="tit">订单金额</text>
				<view class="detail flex_box">
					<text>￥{{Number(info.order_price).toFixed(2)}}</text>
				</view>
			</view>
			<view class="item flex_r_between no_border">
				<text class="tit">店铺介绍</text>
				<view class="detail flex_box">
					<image src="/static/img/manage/edit.png" class="edit" v-show="!flag"></image>
				</view>
			</view>
			<view class="textarea">
				<textarea v-model="info.remark" :disabled="flag"></textarea>
			</view>
		</view>
		
		<view class="btn btn1" v-if="flag" @click="onEdit(false)">编辑</view>
		<view class="btn btn2" v-else @click="onEdit(true)">保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{
					store_name:'',
					logo:{},
					yyzz:{},
					high_opinion:0,
					opinion:0,
					remark:'',
					email:'',
				},
				
				flag:true,
			}
		},
		methods: {
			getDetail(){
				this.$post('store.store/getStoreInfo',{
					id:uni.getStorageSync('shopid')
				}).then(res=>{
					this.info = res.data
				})
			},
			onEdit(e){
				if(e){
					this.$post('store.store/setStoreInfo',{
						store_name:this.info.store_name,
						logo:this.info.logo.image,
						remark:this.info.remark,
						email:this.info.email
					}).then(res=>{
						this.flag = e
					})
				}else {
					this.flag = e
				}
			},
			onAvatar(){
				if(this.flag){ return }
				var that = this
				this.$util.chooseImage({
					count: 1,
				}, res => {
					uni.showLoading({
						title: '上传店铺头像中',
					})
					that.$util.upload('picture', res.tempFilePaths[0], function(result) {
						if (result.code == 0) {
							that.info.logo.image = result.data.url
							uni.hideLoading()
						}
					})
				})
			},
		},
		onLoad() {
			this.getDetail()
		}
	}
</script>

<style lang="less" scoped>
	.store {
		padding: 30rpx;
	}
	.card {
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 0 30rpx 30rpx;
		.item {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #E1E1E1;
			.detail {
				align-items: center;
				text {
					font-size: 30rpx;
					font-weight: 600;
					color: #333333;
					line-height: 42rpx;
				}
				input {
					font-size: 30rpx;
					font-weight: 600;
					color: #333333;
					line-height: 42rpx;
					text-align: right;
				}
				.avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
				.yyzz {
					width: 99rpx;
					height: 69rpx;
				}
				.edit {
					width: 29rpx;
					height: 30rpx;
				}
			}
			.tit {
				font-size: 30rpx;
				color: #7A7A7A;
				line-height: 42rpx;
			}
		}
		.textarea {
			height: 262rpx;
			background: #F3F3F3;
			border-radius: 11rpx;
			padding: 30rpx;
			textarea {
				font-size: 26rpx;
			}
		}
	}
	
	.btn {
		height: 80rpx;
		border-radius: 34rpx;
		text-align: center;
		font-size: 30rpx;
		line-height: 80rpx;
		margin-top: 32rpx;
	}
	.btn2 {
		background: #3393FF;
		color: #FFFFFF;
		border: 1rpx solid transparent;
	}
	.btn1 {
		color: #979797;
		border: 1rpx solid #979797;
	}
</style>
